<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
  <head>
    
    <%@ include file="/WEB-INF/include/meta.jsp"%>
    <%@ include file="/WEB-INF/include/css.jsp"%>
    <link href="${ctx.resource}/css/goals.css" rel="stylesheet">
    <link href="${ctx.resource}/js/component/raty/jquery.raty.css" rel="stylesheet">
    <title>人马君</title>
  </head>
  <!-- end header -->
  <body>
    <div class="page-group">
      <div class="page page-current">
        
        <header class="bar bar-nav fs-header-small">
          <a onclick="window.history.back();" class="icon icon-left pull-left"></a>
          <!-- <a href="${ctx.host}/ungraded-schedules" class="icon icon-left pull-left"></a> -->
          <h1 class="title" style="z-index: -1;">课时详情</h1>
        </header>
        
        <c:if test="${empty courseSchedule.grade}">
          <div class="bar bar-footer" style="padding: 0;">
            <button class="button button-fill save-button" style="top: 0;background: #fedc32; font-size: 1rem; font-weight: bold; color: #333; min-height: 2.2rem; width: 100%;">确定</button>
          </div>
        </c:if>
        
        <div class="content">
          <div class="course-info">
            <p>${courseSchedule.course.name}</p>
            <p>${courseSchedule.occurDate}&nbsp;&nbsp;${courseSchedule.occurHour}</p>
            <p>${courseSchedule.site.name}</p>
          </div>
          
          <div class="coach-info" style="margin-top: .3rem;">
            <img class="left" src="${courseSchedule.student.avatar}" alt="student-logo">
            <div class="right">
              <p>${courseSchedule.student.name}</p>
              <p>${courseSchedule.student.mobile}</p>
            </div>
          </div>
          
          <div>
            <form method="POST" action="${ctx.host}/ungraded-schedules/${courseSchedule.id}/grade">
                <div style="width:100%; margin:100px auto;display: block;">
                   <div id="grade-demo" style="width: 100%;" class="text-center"></div>
                </div>
                
                <c:if test="${empty courseSchedule.grade}">
                  <button type="submit" class="button" style="display: none;"></button>
                </c:if>
            </form>
          </div>
        </div>
      </div>
    </div>
    
    <%@ include file="/WEB-INF/include/script.jsp"%>
    <d:resource root="${ctx.resource}/build" type="script" src="js/page/grade/grade.js" />
    <script type="text/javascript">
      require(['page/grade/grade'], function(page) {
        page.init({
          'grade': '${not empty courseSchedule.grade ? courseSchedule.grade : 0}'
        });
      })
    </script>
  </body>
</html>